<script setup>
import { ref, onMounted } from 'vue'
import easyapi from '../api'
import { ElMessage, ElMessageBox, pageHeaderEmits } from 'element-plus'
//定义绑定的数据
const tableData = ref([]);
//分页的总页数
const total = ref(100)
//查询数据输入框的绑定对象
const checkObj = ref({
    size: 12,
    page: 1
})


onMounted(async function () {
    checkData();
})

//查询功能
const checkData = async (val) => {
    //获取当前页数
    if (typeof val == 'number') {
        checkObj.value.page = val;
    }
    //查询数据
    let result = await easyapi.getSearch('/api/order', checkObj.value)
    //更新表格中的数据
    tableData.value = result.data.list;
    total.value = result.data.count;
}

</script>
<template>
    <el-input v-model="checkObj.memberName" style="width: 150px" placeholder="请输入查询的会员名" />
    <el-button type="primary" @click="checkData">查询</el-button>
    <el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
        style="width: 100%">
        <el-table-column prop="memberName" label="会员姓名" />
        <el-table-column prop="memberPhoneNumber" label="会员电话" />
        <el-table-column prop="courseName" label="购买课程" />
        <el-table-column prop="trainerName" label="课程教练" />
        <el-table-column prop="payment" label="支付金额" />
        <el-table-column prop="time" label="购买时间" />
    </el-table>
    <!-- 分页组件初始显示的页码 -->
    <!-- size:每页的条数 -->
    <el-pagination :page-size="checkObj.size" :current-page="checkObj.page" background layout="prev, pager, next"
        :total="total" @current-change="checkData" />

</template>
<style></style>